<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iFature - Log in</title>

<c:set var="ctx" value="#{facesContext.externalContext.request.contextPath}" />

<!-- CUSTOM STYLES-->
<link href="#{ctx}/resources/css/fature-login.css" rel="stylesheet" type="text/css" />

<!-- JQUERY SCRIPTS -->
<script src="#{ctx}/resources/js/jquery-2.1.1.min.js"></script>

<!--Slider-in icons-->
<script type="text/javascript">
	$(document).ready(function() {
		$(".username").focus(function() {
			$(".user-icon").css("left", "-48px");
		});
		$(".username").blur(function() {
			$(".user-icon").css("left", "0px");
		});

		$(".password").focus(function() {
			$(".pass-icon").css("left", "-48px");
		});
		$(".password").blur(function() {
			$(".pass-icon").css("left", "0px");
		});
	});
</script>

</head>
<body>

  <!--WRAPPER-->
  <div id="wrapper">

    <!--SLIDE-IN ICONS-->
    <div class="user-icon"></div>
    <div class="pass-icon"></div>
    <!--END SLIDE-IN ICONS-->

    <!--LOGIN FORM-->
    <form method="post" action="j_security_check" name="loginForm" class="login-form">
      <!--HEADER-->
      <div class="header">
        <!--TITLE-->
        <h1>iFature</h1>
        <!--END TITLE-->
        <!--DESCRIPTION-->
        <span>Preencha os campos abaixo para realizar login!</span>
        <!--END DESCRIPTION-->
      </div>
      <!--END HEADER-->

      <!--CONTENT-->
      <div class="content">
        <input id="j_username" name="j_username" type="text" class="input username" value="Username" onfocus="this.value=''" />
        <input id="j_password" name="j_password" type="password" class="input password" value="Password" onfocus="this.value=''" />
      </div>
      <!--END CONTENT-->

      <!--FOOTER-->
      <div class="footer">
        <!--LOGIN BUTTON-->
        <input type="submit" name="submit" value="Login" class="button" />
        <!--END LOGIN BUTTON-->
        <!--CLEAR BUTTON-->
        <input type="reset" name="clear" value="Limpar" class="register" />
        <!--END CLEAR BUTTON-->
      </div>
      <!--END FOOTER-->
    </form>
    <!--END LOGIN FORM-->

  </div>
  <!--END WRAPPER-->

  <!--GRADIENT-->
  <div class="gradient"></div>
  <!--END GRADIENT-->
</body>
</html>